<template>
  <div class="app-container">
    <div class="filter-container">
      用户名：
      <el-input placeholder="请输入用户名" size="small"
                class="filter-item search-item" v-model="searchObj.userName"/>
      <el-button size="small" @click="search" class="filter-item" type="primary">
        查询
      </el-button>
      <el-button size="small" @click="reset" class="filter-item">
        重置
      </el-button>
    </div>
    <el-table
      size="medium"
      :data="tabItems"
      ref="table"
      style="width: 100%;"
      v-loading="tabLoading"
    >
      <el-table-column label="用户名" align="left"
        prop="userName"
      />
      <el-table-column label="所属区域" align="left"
        prop="areaName"
      />
      <!-- <el-table-column label="关联用户数" align="center"
        prop="test2"
      /> -->
      <!-- <el-table-column label="创建用户" align="center"
        prop="test3"
      /> -->
      <el-table-column label="手机号" align="center"
        prop="mobile"
      />
      <el-table-column label="创建时间" align="center"
        prop="createTime"
        min-width="80px"
      />
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailItem(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination
        :background="true"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :page-count="pagination.pageCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {selectUserPage, deleteUser, updateUser} from '@/http/apiUrls.js';


export default {
  name: 'CSMManager',
  data() {
    return {
      tabLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItems: [],
      searchObj: {
        userName: ''
      },
    }
  },
  created(){
    this.getData(1, this.pageItems, this.searchObj)
  },
  
  methods: {
    getExtra(){
      if(this.searchObj.userName){
        return {"userName_eq" : this.searchObj.userName}
      }else{
        return {};
      }
    },
    search(){
      this.getData(1, this.pageItems, this.searchObj, this.getExtra())
    },
    reset(){
      this.searchObj = {
        userName: ''
      }
      this.getData(1, this.pageItems, {}, {})
    },
    getData(current , size, model, extra){
      let requestData = { 
        current,
        size,
        model,
        extra
      }
      this.tabLoading = true;
      this.$postJson(selectUserPage, requestData).then(res => {
        this.tabLoading = false;
        if(res){
          console.log(res);
          const pagination = {
            currentPage: parseInt(res.current), // 当前页面号
            pageSize: parseInt(res.size), // 每页条目数
            pageCount: parseInt(res.pages), // 总页面数
          }

          this.pagination = pagination;
          this.tabItems = res.records;
          this.tabItems.forEach(item=>{
            item.roleName = this.getRole(item.roleId);
          })
          }
        })
    },
    getRole(val){
      switch(val){
        case "1518835737888292864":
          return "测试角色";
        case "1504654405721391104":
          return "运营管理员";
        case "1504378231501881344":
          return "系统管理员";
      }
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.searchObj, this.getExtra())
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.searchObj, this.getExtra())
    },
    detailItem(item) {
      console.log(item);
      this.$router.push({
        path: "/csm/csmManagerDetail",
        query: {id: item.id}
      })
    },
  }
}
</script>
<style scoped>

</style>